<template>
	<view class="content">
		<!-- <u-row customStyle="margin-bottom: 10px">
			<u-col span="6">
			</u-col>
			<u-col span="6">
			</u-col>
		</u-row> -->
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="3">
				<u-avatar :src="user.avatar" size="80"></u-avatar>
			</u-col>
			<u-col span="4">
				<u--text :text="user.name" bold size="24"></u--text>
				<u--text :text="user.phone" bold size="18" color="#004eec"></u--text>
			</u-col>
			<u-col span="2">
			</u-col>
			<u-col span="3">
				<u-tag text="分享" shape="circle" icon="share"></u-tag>
			</u-col>
		</u-row>
		<!-- <u-gap height="2" bgColor="#bbb"></u-gap> -->

		<view class="status">
			<u-cell-group :border="false">
				<u-cell title="我的订单" value="查看全部" :border="false" :isLink="true" arrow-direction="right"></u-cell>
			</u-cell-group>

			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3" v-for="(item,index) in statusList" :key="index">
					<u-icon :name="item.icon" size="36" color="#787878" :label="item.title" bold
						labelPos="bottom"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view class="operate">
			<u-cell-group :border="false">
				<u-cell v-for="(item,index) in operateList" :key="index" :title="item.title" :isLink="true"
					arrow-direction="right"  customStyle="flex:none"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const user = ref({
		id: '123321',
		name: '名称',
		avatar: 'https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg',
		vip: '0',
		phone: '13323655632'
	})
	const statusList = ref([{
			title: '待支付',
			icon: 'shopping-cart'
		},
		{
			title: '待发货',
			icon: 'clock'
		},
		{
			title: '代收货',
			icon: 'car'
		},
		{
			title: '评价',
			icon: 'more-circle'
		}
	])
	const operateList = ref([{
			title: '绑定手机号',
			imageUrl: ''
		},
		{
			title: '收货地址',
			imageUrl: ''
		},
		{
			title: '联系客服',
			imageUrl: ''
		},
		// {
		// 	title:'绑定手机号',
		// 	imageUrl:''
		// },
		// {
		// 	title:'绑定手机号',
		// 	imageUrl:''
		// },
		// {
		// 	title:'绑定手机号',
		// 	imageUrl:''
		// },
		{
			title: '退出登录',
			imageUrl: ''
		}
	])
	// onLoad(() => {})
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #f4feff;
	}

	::v-deep .u-cell__title[data-v-3fd6feca] {
		// display: flex;
		flex: none;
	}

	// /deep/ .u-cell__title.data-v-3fd6feca {
	// 	// display: flex;
	// 	flex: none;
	// }
</style>